<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>{$website['name']|default=''|htmlentities} – {$site.name|htmlentities}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="renderer" content="webkit">
    <meta name="keywords" content="{$website['keywords']|htmlentities}">
    <meta name="description" content="{$website['description']|htmlentities}">
    <link rel="shortcut icon" href="__CDN__/assets/img/favicon.ico" />
    <link href="/assets/css/frontend.css" rel="stylesheet">
    <link href="/assets/css/common.css" rel="stylesheet">
    <script type="text/javascript">
        var require = {
            config: JSON.parse('{$config|json_encode}')
        };
    </script>
    <!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
    <!--[if lt IE 9]>
    <script src="__CDN__/assets/js/html5shiv.js"></script>
    <script src="__CDN__/assets/js/respond.min.js"></script>
    <![endif]-->
    <style>
        .category-item .category-header{padding: 6px 4px}
        .category-submenu .submenu-item{padding: 6px 4px 6px 20px}
        .activity-head{
            font-size: 18px;
            font-weight: 400;
            color:#333;padding:10px 0;
        }
        .activity-tabs{
            display: flex;flex-direction: column;padding:8px 15px ;
        }
        .activity-tabs .activity-top .activity-self{font-size: 16px;color:#555;padding:10px 0;}
        .activity-tabs .activity-top .activity-title{
            font-size: 16px;
            height:30px;
            line-height: 30px;
            overflow: hidden;
            margin-bottom: 8px;
            color: #333;

        }
        .activity-tabs .activity-top .activity-desc {
            font-size: 13px;
            line-height: 24px;
            height: 24px;
            overflow: hidden;
            color: #666;
            margin-bottom: 8px;
        }
        .activity-tabs .activity-tags{display: flex; gap:10px; margin-bottom: 12px;}
        .activity-tabs .activity-tags .tags{
            padding:8px 12px; font-size: 15px;color: #000;background:#fff; border-radius: 4px; border:1px solid #fff;
        }
        .activity-tabs .activity-tags .tags:hover{color:#fc8939; border:1px solid #fc8939;}
        .activity-tabs .activity-tags .tags.active{color:#fc8939; border:1px solid #fc8939;}
        .activity-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 15px;
            padding: 8px 15px ;
        }
        .activity-card {
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            padding: 12px;
            transition: transform 0.2s;
        }
        .activity-card:hover {
            transform: translateY(-5px);
        }
        .activity-card .activity-header {
            margin-bottom: 16px;
        }
        .activity-card .activity-header .activity-title {
            display:flex;
            font-size: 16px;
            font-weight: 400;
            height:30px;
            line-height: 30px;
            overflow: hidden;
            margin-bottom: 8px;
            color: #333;
        }
        .activity-card .activity-header .activity-desc {
            font-size: 13px;
            line-height: 24px;
            height: 24px;
            overflow: hidden;
            color: #666;
        }
        .activity-footer {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .avatar-small {
            width: 24px;
            height: 24px;
            border-radius: 50%;
        }
        .signup-count {
            font-size: 14px;
            color: #666;
        }
        .activity-actions {
            display: flex;
            gap: 8px;
        }
        .btn {
            padding: 6px 12px;
            border-radius: 4px;
            border: none;
            font-size: 14px;
            cursor: pointer;
            transition: background-color 0.2s;
            border:1px solid #fc8939;
            color: #fc8939;
            background:#fff;
        }
        
        .btn:hover {
            border:1px solid #fc8939;
            color: #fc8939;
        }
    </style>
</head>
<body>
    <div id="app">
        <div id="loading" ref="loadNode">
            <div id="loading-center">
                <div id="loading-center-absolute">
                    <div class="object" id="object_four"></div>
                    <div class="object" id="object_three"></div>
                    <div class="object" id="object_two"></div>
                    <div class="object" id="object_one"></div>
                </div>
            </div>
        </div>
        <header class="header">
            <div class="header-container">
                <div class="header-left">
                    <div class="header-logo" @click="handle('/',false)">
                        <img src="__CDN__/assets/img/logo.png" alt="Logo" class="header-logo">
                        <span class="header-title">{$site.name|htmlentities}</span>
                    </div>
                    <nav class="header-nav">
                        <a href="javascript:;" @click="handle(item.url,item.is_login)" :class="item.url =='/adviser'?`nav-item active`:`nav-item`" v-for="(item,index) in head">{{item.name}}</a>
                    </nav>
                </div>
                <div class="header-right"  v-if="user">
                    <i class="fa fa-list-alt header-icon" @click="handle('/notice',false)"></i>
                    <div class="user-info" data-toggle="dropdown">
                        <img :src="user.avatar || '__CDN__/assets/img/avatar.png'" class="user-avatar">
                        <span class="user-name">{{ user.nickname }}</span>
                    </div>
                    <ul class="dropdown-menu">
                        <!-- User image -->
                        <li class="user-header" @click="handle('/user/info')">
                            <img :src="user.avatar" class="img-circle" alt="">
                            <p>
                                <div>{{ user.nickname }}</div>
                                <small>闻道ID:{{user.id}}</small>
                            </p>
                        </li>
                        <li class="user-body">
                            <div class="user-list" @click="handle('/user/info')">
                                <div>我的资料</div>
                                <i class="fa fa-chevron-right"></i>
                            </div>
                            <div  class="user-list" @click="handle('/user/favorites')">
                                <div>我的收藏</div>
                                <i class="fa fa-chevron-right"></i>
                            </div>
                            <div class="user-list" @click="handle('/user/adviser')">
                                <div>我的实战</div>
                                <i class="fa fa-chevron-right"></i>
                            </div>
                        </li>
                        <li class="user-body">
                            <div class="user-list" @click="handle('/user/list')">
                                <div>榜单明细</div>
                                <i class="fa fa-chevron-right"></i>
                            </div>
                        </li>
                        <!-- Menu Footer-->
                        <li class="user-footer">
                            <div>
                                <a href="/user/logout"><i class="fa fa-sign-out"></i>
                                    {:__('Logout')}</a>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="header-right" v-else   @click="handle('/',false)">
                    <i class="fa fa-list-alt header-icon" ></i>
                    <div class="user-info">
                        <i class="fa fa-user-circle fa-fw header-icon" style="margin-right: 5px;"></i>
                        <span class="user-name">登录</span>
                    </div>
                </div>
                
            </div>
        </header>
        <section class="banner">
            <div class="search-container">
                <div class="search-categories">
                    <a href="javascript:;" class="search-category" @click="handle('/',false)">全部</a>
                    <a href="javascript:;" class="search-category"  @click="handle('/wfgroup',true)">闻风楼</a>
                    <a href="javascript:;" class="search-category"  @click="handle('/wpgroup',true)">三十六计</a>
                    <a href="javascript:;" class="search-category active"  @click="handle('/adviser',true)">谋士</a>
                    <a href="javascript:;" class="search-category"  @click="handle('/resource',true)">资源库</a>
                </div>
                <div class="search-box">
                    <input type="text" class="search-input" placeholder="搜索..." v-model="searchQuery" @input="handleSearch" @keydown="handleKeyDown">
                    <button class="search-button" @click="submitSearch"><i class="fa fa-search"></i></button>
                    <div class="search-suggestions" v-if="suggestions.length && showSuggestions" style="z-index: 1000000;">
                        <div class="suggestion-item" v-for="(item, index) in suggestions" :key="index" @click="selectSuggestion(item)">
                            <div class="suggestion-title" v-html="item.text"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="headerCarousel" class="carousel slide" data-ride="carousel" data-interval="2500" data-pause="hover">
                <!-- 指示器 -->
                <ol class="carousel-indicators">
                    <template v-for="(item,bi) in banner" :key="bi">
                        <li :data-target="'#headerCarousel'" :data-slide-to="bi" :class="{active: bi === 0}"></li>
                    </template>
                </ol>
            
                <!-- 轮播图片 -->
                <div class="carousel-inner">
                    <div :class="index==0?`item active`:`item`" v-for="(item,index) in banner"  @click="handle(item.url,item.is_login)">
                        <img :src="item.image" :alt="item.title">
                    </div>
                </div>
            
                <!-- 左右切换按钮 -->
                <a class="left carousel-control" href="#headerCarousel" data-slide="prev">
                    
                </a>
                <a class="right carousel-control" href="#headerCarousel" data-slide="next">
                    
                </a>
            </div>
        </section>
        <section class="container">
            <div class="row">
                <div class="col-md-2 hidden-xs"></div>
                <div class="col-md-10 col-xs-12">
                    {volist name="cate" id="vo"}
                    <div class="col-md-2">
                        <a href="javascript:;" @click="handle('{$vo.url}',{:boolval($vo['is_login'])})" class="adviser-tab">
                            <img src="{$vo.icon}" alt="Adviser">
                            <span>{$vo.name}</span>
                        </a>
                    </div>
                    {/volist}
                </div>
            </div>
            <div class="row">
                <div class="col-md-1 hidden-xs">
                </div>
                <div class="col-md-11 col-xs-12">
                    <div class="activity-tabs">
                        <div class="activity-top">
                            <div class="activity-self">我参与的</div>
                        </div>
                    </div>
                    <div class="activity-grid">
                        <div class="activity-card">
                            <div class="activity-header">
                                <div class="activity-title"><img src="/assets/img/logo.png" width="30" height="30"/><span>Cursor-零基础做软件应用</span></div>
                                <div class="activity-desc">写代码可以像使用 Word 一样简单</div>
                            </div>
                            <div class="activity-footer">
                                <div class="activity-stats">
                                    <span>报名：</span>
                                    <span class="signup-count">2047人报名</span>
                                </div>
                                <div class="activity-actions">
                                    <button class="btn"><i class="fa fa-list-alt" @click="handleAdviser('')"></i>实战手册</button>
                                    <button class="btn"><i class="fa fa-list-alt"></i>实战好事</button>
                                    <button class="btn">查看详请</button>
                                </div>
                            </div>
                        </div>
                        <div class="activity-card">
                            <div class="activity-header">
                                <div class="activity-title">YouTube Shorts</div>
                                <div class="activity-desc">平台竞争红利期，在头部海外自媒体建立长期收益</div>
                            </div>
                            <div class="activity-footer">
                                <div class="activity-stats">
                                    <img src="/assets/img/avatar.png" class="avatar-small">
                                    <span class="signup-count">2881人报名</span>
                                </div>
                                <div class="activity-actions">
                                    <button class="btn btn-signup">即刻报名</button>
                                    <button class="btn btn-follow">取消关注</button>
                                    <button class="btn btn-detail">查看详情</button>
                                </div>
                            </div>
                        </div>
                        <div class="activity-card">
                            <div class="activity-header">
                                <div class="activity-title">小绿书带货</div>
                                <div class="activity-desc">紧跟微信生态新趋势：低门槛做交易</div>
                            </div>
                            <div class="activity-footer">
                                <div class="activity-stats">
                                    <img src="/assets/img/avatar.png" class="avatar-small">
                                    <span class="signup-count">962人报名</span>
                                </div>
                                <div class="activity-actions">
                                    <button class="btn btn-signup">即刻报名</button>
                                    <button class="btn btn-follow">取消关注</button>
                                    <button class="btn btn-detail">查看详情</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>  
            <div class="row">
                <div class="col-md-1 hidden-xs">
                    <div class="category-menu" v-if="items.length>0">
                        <template v-for="(item,index) in items">
                            <div class="category-item">
                                <div :class="currentCategory == item.id?`category-header expanded`:`category-header`" @click=" currentCategory = item.id" >
                                    <span>{{item.value}}</span>
                                    <i class="fa fa-angle-down"></i>
                                </div>
                                <div :class="currentCategory == item.id?`category-submenu show`:`category-submenu`">
                                    <template v-for="(itm,idx) in item.child">
                                    <a href="javascript:;" :class="itemTab == itm.id?`submenu-item active`:`submenu-item`" @click="handCate(itm.id,item.id)">{{itm.value}}</a>
                                    </template>
                                </div>
                            </div>
                        </template>
                    </div>
                </div>
                <div class="col-md-11 col-xs-12">
                    {foreach name="list" item="vos"}
                    <div class="activity-head" id="{$vos.id}">{$vos.title}</div>
                    {php}
                        $data =$vos['data'];
                        $type1 = [];
                        $type2 = [];
                        $type3 = [];
                        foreach( $data as $key => $value){
                            $value['tags'] = array_merge([0],array_unique(array_column(collection($value['categories'])->toArray(), 'id')));
                            if($value['type'] == 1){
                                
                                $type1[] = $value;
                            }elseif($value['type'] == 2){
                                
                                $type2[] = $value;
                            }else{
                                
                                $type3[] = $value;
                            }
                        }
                        if(count($type1)>0){
                            $activeids =['0'=>['name'=>'全部','id'=>0,'nums'=>count($type1)]];
                            foreach($type1 as $key => $value){
                                foreach($value['categories'] as $k => $v){
                                    if(isset($activeids[$v['id']])){
                                        $activeids[$v['id']]['nums'] +=1;
                                    }else{
                                        $activeids[$v['id']] = ['name'=>$v['name'],'id'=>$v['id'],'nums'=>1];
                                    }
                                }
                            }
                    {/php}
                    <div class="activity-tabs">
                        <div class="activity-top">
                            <div class="activity-title">战役实战({:count($type1)})</div>
                        </div>
                        <div class="activity-tags">
                            {foreach name="activeids" item="vo"}
                            <a class="tags {eq name="vo.id" value='0'} active {/eq}" href="javascript:;" data-tabs="{$vo.id}">{$vo.name}({$vo.nums})</a>
                            {/foreach}
                        </div>
                        <div class="activity-grid">
                            {foreach name="type1" item="vo"}
                            <div class="activity-card" data-ids="{:implode(',',$vo.tags)}">
                                <div class="activity-header">
                                    <div class="activity-title"><img src="{$vo.image|default='/assets/img/logo.png'}" width="30" height="30"/><span>{$vo.title}</span></div>
                                    <div class="activity-desc">{$vo.description}</div>
                                </div>
                                <div class="activity-footer">
                                    <div class="activity-stats">
                                        <span>报名：</span>
                                        <span class="signup-count">{$vo.nums}人报名</span>
                                    </div>
                                    <div class="activity-actions">
                                        <div class="btn" @click="handleAdviser({$vo.id})"><i class="fa fa-list-alt" ></i>实战手册</div>
                                        <div class="btn" @click="handle('adviser/lists?id={$vo.id}',true)"><i class="fa fa-list-alt" ></i>实战好事</div>
                                        <div class="btn"  @click="handle('adviser/detail?id={$vo.id}',true)">查看详请</div>
                                    </div>
                                </div>
                            </div>
                            {/foreach}
                        </div>
                    </div>
                    {php}
                        }
                        if(count($type2)>0){
                            $activeids =['0'=>['name'=>'全部','id'=>0,'nums'=>count($type2)]];
                            foreach($type2 as $key => $value){
                                foreach($value['categories'] as $k => $v){
                                    if(isset($activeids[$v['id']])){
                                        $activeids[$v['id']]['nums'] +=1;
                                    }else{
                                        $activeids[$v['id']] = ['name'=>$v['name'],'id'=>$v['id'],'nums'=>1];
                                    }
                                }
                            }
                    {/php}
                    <div class="activity-tabs">
                        <div class="activity-top">
                            <div class="activity-title">战术实战({:count($type2)})</div>
                        </div>
                        <div class="activity-tags">
                            {foreach name="activeids" item="vo"}
                            <a class="tags {eq name="vo.id" value='0'} active {/eq}" href="javascript:;" data-tabs="{$vo.id}">{$vo.name}({$vo.nums})</a>
                            {/foreach}
                        </div>
                        <div class="activity-grid">
                            {foreach name="type2" item="vo"}
                            <div class="activity-card" data-ids="{:implode(',',$vo.tags)}">
                                <div class="activity-header">
                                    <div class="activity-title"><img src="{$vo.image|default='/assets/img/logo.png'}" width="30" height="30"/><span>{$vo.title}</span></div>
                                    <div class="activity-desc">{$vo.description}</div>
                                </div>
                                <div class="activity-footer">
                                    <div class="activity-stats">
                                        <span>报名：</span>
                                        <span class="signup-count">{$vo.nums}人报名</span>
                                    </div>
                                    <div class="activity-actions">
                                        <div class="btn" @click="handleAdviser({$vo.id})"><i class="fa fa-list-alt" ></i>实战手册</div>
                                        <div class="btn" @click="handle('adviser/lists?id={$vo.id}',true)"><i class="fa fa-list-alt" ></i>实战好事</div>
                                        <div class="btn"  @click="handle('adviser/detail?id={$vo.id}',true)">查看详请</div>
                                    </div>
                                </div>
                            </div>
                            {/foreach}
                        </div>
                    </div>
                    {php}
                        }
                        if(count($type3)>0){
                            $activeids =['0'=>['name'=>'全部','id'=>0,'nums'=>count($type3)]];
                            foreach($type3 as $key => $value){
                                foreach($value['categories'] as $k => $v){
                                    if(isset($activeids[$v['id']])){
                                        $activeids[$v['id']]['nums'] +=1;
                                    }else{
                                        $activeids[$v['id']] = ['name'=>$v['name'],'id'=>$v['id'],'nums'=>1];
                                    }
                                }
                            }
                    {/php}
                    <div class="activity-tabs">
                        <div class="activity-top">
                            <div class="activity-title">战略实战({:count($type3)})</div>
                        </div>
                        <div class="activity-tags">
                            {foreach name="activeids" item="vo"}
                            <a class="tags {eq name="vo.id" value='0'} active {/eq}" href="javascript:;" data-tabs="{$vo.id}">{$vo.name}({$vo.nums})</a>
                            {/foreach}
                        </div>
                        <div class="activity-grid">
                            {foreach name="type3" item="vo"}
                            <div class="activity-card" data-ids="{:implode(',',$vo.tags)}">
                                <div class="activity-header">
                                    <div class="activity-title"><img src="{$vo.image|default='/assets/img/logo.png'}" width="30" height="30"/><span>{$vo.title}</span></div>
                                    <div class="activity-desc">{$vo.description}</div>
                                </div>
                                <div class="activity-footer">
                                    <div class="activity-stats">
                                        <span>报名：</span>
                                        <span class="signup-count">{$vo.nums}人报名</span>
                                    </div>
                                    <div class="activity-actions">
                                        <div class="btn" @click="handleAdviser({$vo.id})"><i class="fa fa-list-alt" ></i>实战手册</div>
                                        <div class="btn" @click="handle('adviser/lists?id={$vo.id}',true)"><i class="fa fa-list-alt" ></i>实战好事</div>
                                        <div class="btn"  @click="handle('adviser/detail?id={$vo.id}',true)">查看详请</div>
                                    </div>
                                </div>
                            </div>
                            {/foreach}
                        </div>
                    </div>
                    {php}
                        }
                    {/php}
                    {/foreach}
                </div>
            </div>
        </section>
    </div>
</body>
<script src="/assets/js/require.js" data-main="/assets/js/require-frontend.js?v={$site.version|htmlentities}"></script>

</html>
